<template>
  <div
    class="flex items-center cursor-pointer"
    style="min-width: 110px"
    @click="backHome"
  >
    <img :style="logoSize" src="/logo/logo.svg" alt="" />
    <div class="ml-10px flex flex-col justify-between">
      <h2 class="fw-700" :style="{ 'font-size': props.titleSize }">算力圈</h2>
      <span class="text-light" :style="{ 'font-size': props.subSize }"
        >中国算力网西部运营中心</span
      >
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  logoSize: {
    type: String,
    default: "36px",
  },
  titleSize: {
    type: String,
    default: "16px",
  },
  subSize: {
    type: String,
    default: "10px",
  },
});

const logoSize = computed(() => ({
  width: props.logoSize,
  height: props.logoSize,
}));

const router = useRouter();
const backHome = () => {
  router.push({
    path: "/",
    replace: true,
  });
};
</script>
